<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" value="click me" id="btn"> 
    <ul id="list">
        <li id="item1">item1</li>
        <li id="item2">item2</li>
        <li id="item3">item3</li>
    </ul>
    <script>
        var btn= document.getElementById("btn");
        document.onclick=function(event){
            event=event||window.event;
            var target=event.target||event.srcElement;
            if(target==btn){
                alert(btn.value);
            }
        }
        //事件委托优点：
        //1.提高javascript性能，提高时间处理速度，减少内存的占用
        //2.动态添加DOM元素，不需要因为元素的改动而修改事件绑定

        //事件委托的缺点
        //对于一些没有冒泡的事件无法使用事件委托，如：load、unload、blur、focus、onmouseover、onmouseout、scroll、Media中的相关事件、
        var list=document.getElementById("list");
        document.addEventListener("click",function(event){
            var target=event.target;
            if(target.nodeName=="LI"){
                alert(target.innerHTML);
            }
        })
        var oLi=document.createElement("li");
        var textnode=document.createTextNode("item4");
        oLi.appendChild(textnode);
        list.appendChild(oLi);

        //阻止事件冒泡的两种方法
        //1.在要要触发的点击事件函数中 写 window.event.cancelBubble = true  这种方法  IE 和谷歌 支持,而火狐不支持
        //2.在事件处理函数中传入一个对象参数,  在函数中添加  对象参数.stopPropagation;

        //阻止事件默认行为
        //1.return false  注：仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行
        //2.e.preventDefault()
    </script>
</body>
</html>
